<template>
	<view class="container">
		<u-navbar placeholder title="个人信息" leftIconColor="#fff" bgColor="#0a0816" :autoBack="true"></u-navbar>
		<view class="pad-left-right-26">
			<view class="bg-theme1 mar-top-28 radius24 pad-top-bottom-32">
				<u-cell :titleStyle="titleStyle" :border="false" title="头像" isLink @click="hanldeAvatar">
					<template slot="value">
						<view class="centerXY">
							<image :src="info.avatar" class="avatar"></image>
					<!-- 		<qf-image-cropper :width="500" :height="500" :radius="30"
								@crop="handleCrop"></qf-image-cropper> -->

						</view>
					</template>
				</u-cell>

				<u-cell @click="nameEidt = true" :titleStyle="titleStyle" :valueStyle="{color: '#fff'}"
					:value="info.nickname" :border="false" title="昵称" isLink></u-cell>
				<u-cell :titleStyle="titleStyle" :border="false" title="手机号" :valueStyle="{color: '#fff'}"
					:value="info.tel" isLink></u-cell>
			</view>

			<view class="bg-theme1 mar-top-28 radius24 pad-top-bottom-32">
				<u-cell :titleStyle="titleStyle" :border="false" title="区块链地址">
					<template slot="value">
						<view class="centerXY">
							<view class="multi1 color-white font-28 u-slot-value mar-right-10">{{info.avata_acc}}</view>
							<view>
								<setCopy :content="info.avata_acc" class="centerY">
									<template v-slot:content>
										<image src="../../static/icon/copy-icon.png" class="copy" mode=""></image>
									</template>
								</setCopy>
							</view>
						</view>
					</template>
				</u-cell>
				<u-cell @click="hanldeRealName" :titleStyle="titleStyle" :border="false" title="我的认证" isLink>
					<template slot="value">
						<text v-if="authInfo.status == 1" class="font-28 color-white">未实名</text>
						<text v-if="authInfo.status == 2" class="font-28 color-white">已实名</text>
						<text v-if="authInfo.status == 3" class="font-28 color-white">实名失败</text>
					</template>
				</u-cell>
				<u-cell @click="hanldePsw" :titleStyle="titleStyle" :border="false" title="操作密码" isLink></u-cell>
				<u-cell @click="hanldeLoginPsw" :titleStyle="titleStyle" :border="false" title="登录密码" isLink></u-cell>
				<u-cell :titleStyle="titleStyle" :border="false" title="我的客服">
					<template slot="value">
						<view class="centerXY">
							<view class="multi1 color-white text-right font-28 u-slot-value mar-right-10">{{service}}
							</view>
							<view>
								<setCopy :content="service" class="centerY">
									<template v-slot:content>
										<image src="../../static/icon/copy-icon.png" class="copy" mode=""></image>
									</template>
								</setCopy>
							</view>
						</view>
					</template>
				</u-cell>
			</view>

			<view class="bg-theme1 mar-top-28 radius24 pad-top-bottom-18">
				<u-cell @click="hanldeLogOff" :titleStyle="titleStyle" :border="false" title="注销账号" isLink></u-cell>
			</view>

			<u-button @click="hanldeShowPopup"
				:customStyle="{color: '#fff', height:'96rpx',background:' linear-gradient(90deg, #5347FE 0%, #FC6BB0 100%)',borderRadius:'50rpx',border: 0,}"
				class="mar-top-80 button" color="#fff" type="primary" :plain="true" :hairline="true"
				text="退出登录"></u-button>

			<!-- 修改昵称 -->
			<u-popup :customStyle="customStyles" round="15" :show="nameEidt" mode="center">
				<view class="pad-30">
					<view class="text-center font-40">修改昵称</view>
					<view class="text-center pad-30 content font-28">
						<u--input placeholder="请输入新昵称" border="surround" v-model="nickname"></u--input>
					</view>
					<view class="betweenX gap60">
						<view @click="nameEidt =false"
							class="flex-w color-theme radius50 pad-top-bottom-15 button-style text-center">取消
						</view>
						<view @click="hanldeUserConfirm"
							class="flex-w bg-theme color-white radius50 pad-top-bottom-15 button-style text-center">
							确认
						</view>
					</view>
				</view>
			</u-popup>

			<!-- 确认退出 -->
			<my-popup content="您确定退出当前账号吗？" :show="isPopup" @cancel="hanldeCancel" @confirm="hanldeConfirm"></my-popup>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		baseInfo,
		realNameAuthInfo,
		updateBaseInfo
	} from '@/config/api.js'
	import {
		uploadUrl,
	} from "@/config/url.js"
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	export default {
		components: {
			avatar
		},
		data() {
			return {
				// 我的客服
				service: uni.getStorageSync('config').service_info,
				// 弹窗样式
				customStyles: {
					width: '650rpx',
					height: '400rpx'
				},
				nameEidt: false,
				// 用户信息
				info: {},
				// 实名认证
				authInfo: {},
				// 样式
				titleStyle: {
					color: '#7a7a7a'
				},
				// 弹框
				isPopup: false,
				// 上传内容
				upInfo: {},
				// 昵称
				nickname: ""
			}
		},
		onShow() {
			this.getBaseInfo();
		},
		methods: {
			hanldeAvatar() {
				uni.navigateTo({
					url: '/pages/my/avatar'
				})
			},
			// 修改密码
			hanldeLoginPsw() {
				uni.navigateTo({
					url: '/pages/my/updateLoginPaw'
				})
			},
			// 确认修改昵称
			hanldeUserConfirm() {
				this.upInfo.nickname = this.nickname;
				this.updateInfo();
				this.nameEidt = false;
			},
			// 跳转去注销
			hanldeLogOff() {
				uni.navigateTo({
					url: '/pages/my/logOff'
				})
			},
			// 跳转去实名认知
			hanldeRealName() {
				uni.navigateTo({
					url: '/pages/my/certification'
				})
			},
			// 修改头像
			myUpload(e) {
				console.log(e);
				let clientOs = ''
				/*#ifdef APP-PLUS*/
				let platform = uni.getSystemInfoSync().platform
				switch (platform) {
					case "ios":
						clientOs = 'ios';
						break;
					case "android":
						clientOs = 'android';
						break;
					default:
						break;
				}
				/*#endif*/
				/*#ifdef H5*/
				if (navigator.userAgent.indexOf('Mobile') === -1) {
					clientOs = 'pc';
				} else {
					clientOs = 'h5';
				}
				/*#endif*/

				uni.uploadFile({
					url: uploadUrl, //仅为示例，非真实的接口地址
					filePath: e.path,
					method: 'POST',
					name: 'file',
					header: {
						'Client-OS': 'wap',
						'Client-Version': '3.0.0',
						'Sys-Type': 'member',
						'Token': uni.getStorageSync('token') || ''
					},
					success: (res) => {
						this.upInfo.avatar = JSON.parse(res.data).data.url;
						this.updateInfo();
					}
				});
			},
			// 更改信息
			updateInfo() {
				updateBaseInfo(this.upInfo).then(res => {
					this.getBaseInfo();
				})
			},
			// 设置操作密码
			hanldePsw() {
				uni.navigateTo({
					url: '/pages/my/operPsw'
				})
			},
			// 获取用户信息
			getBaseInfo() {
				baseInfo().then(res => {
					this.info = res.data.info;
				})

				// 权限信息
				realNameAuthInfo().then(res => {
					this.authInfo = res.data.info;
				})
			},
			// 退出登录
			hanldeShowPopup() {
				this.isPopup = true;
			},
			//取消弹框
			hanldeCancel() {
				this.isPopup = false;
			},
			// 确认退出登录
			hanldeConfirm() {
				this.isPopup = false;
				uni.removeStorageSync('token')
				uni.redirectTo({
					url: '/pages/my/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
	}


	.avatar {
		display: block;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.u-slot-value {
		width: 400rpx;
	}

	.copy {
		display: block;
		width: 40rpx;
		height: 40rpx;
	}

	.button> ::v-deep .u-button__text {
		font-size: 32rpx !important;
	}

	.content {
		height: 200rpx
	}


	.button-style {
		border: 2rpx solid $uni-theme;
	}
</style>